<template>
	<view class="">
		<view class="custom-navbar" :style="{'height':capsuleTop}">
			<view class="custom-navbar-title">
				地图
			</view>
			<image class="custom-close-img" :src="clsoeImg" mode="" @click="close"></image>
		</view>
		<view class="content" :style="{'margin-top':capsuleTop}">
			<map id="myMap" class="map" :longitude="lng" :latitude="lat" ></map>
		</view>
	</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				query:{},
				lng: 120.12345,
				lat: 30.67890,
				scale:'14',
				capsuleTop: uni.getMenuButtonBoundingClientRect().top + 35.5 + 'px',
				clsoeImg: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/money/close.png',
			}
		},
		onLoad(options) {
			this.query = options;
			if(options){
				this.btns(options);
			}
			
		},
		onShow() {
			this.getIndex();
		},
		methods: {
			close() {
				uni.navigateBack();
			},
			
			btn() {
				uni.navigateTo({
					url: '/pages/sort/sort-people'
				});
			},
			btns(options) {
				 uni.openLocation({
				        latitude: Number(options.latitude), // 目的地纬度
				        longitude: Number(options.longitude), // 目的地经度
				        name: options.name, // 位置名
				        address: options.address, // 地址的详细信息
				        success() {
				          console.log('导航启动成功');
				        },
				        fail(error) {
				          console.error('导航启动失败', error);
				        }
				      });
			},
			async getIndex() {
				try {
					let data = await new this.Request(this.Urls.m().business).modepost();
					this.list = data.data.list;
					let city = data.data.cityList;
					this.citys = city[0].city;
					city.forEach(item => {
						this.cityList.push(item.city);
					})
				} catch (e) {
					console.log(e, 'e')

				}

			},
		},

	}
</script>

<style scoped>
	.custom-navbar {
			// display: flex;
			// justify-content: center;
			// align-items: center;
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 999;
			text-align: center;
			font-size: 44rpx;
			font-family: YouSheBiaoTiHei;
			font-weight: 500;
			color: #333333;
			/* 导航栏高度 */
			background-image: linear-gradient(to right, #caecf8 0%, #fff 100%);
			/* 渐变色 */
			/* 其他样式 */
		}
		.custom-navbar-title {
			width: 100%;
			position: absolute;
			bottom: 10rpx;
			text-align: center;
		}
		.custom-close {
			width: 750rpx;
			position: relative;
		}
	
		.custom-close-img {
			width: 32rpx;
			height: 32rpx;
			position: absolute;
			bottom: 25rpx;
			left: 30rpx;
		}

	.content {
		min-height: 100vh;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		padding: 0 27rpx 0;
		width: 750rpx;
		background: #F3F4F9;
	}
	.map {
			width: 100%;
			height: 100vh;
			position: relative;
			z-index: 10;
		}
</style>